<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color: ['#5b9bd5', '#ed7d31'],
      backgroundColor: '#FFF',
      grid: {
        top: 20,
        bottom: 80,
        left: '50',
        right: '50'
      },
      legend: {
        bottom: '10',
        itemWidth: 30,
        itemHeight: 6,
        data: item.map(item => {
          return item.category
        })
      },
      xAxis: [
        {
          nameLocation: 'center',
          nameGap: 30,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            interval: 0,
            rotate: 45,
            margin: 10
          },
          data: item.map(item => {
            return item.category
          })
        }
      ],
      yAxis: [
        {
          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          axisLabel: {
            color: '#000'
          }
        },
        {
          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#000'
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '20',
          data: item.map(item => {
            return item.productNumber
          })
        },
        {
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 0
          },
          lineStyle: {
            width: 2
          },
          data: item.map(item => {
            return item.companyNumber
          })
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
